<template>
    <div class="main-box">
        <div class="search-box">
            <Form :model="searchData" ref="search" :label-width="60" inline>
                <FormItem label="客户名称" prop="member_name" :label-width="80">
                    <Input type="text" v-model="searchData.member_name" clearable placeholder="客户名称"></Input>
                </FormItem>
                <FormItem label="所属群号" prop="group_number" :label-width="80">
                    <Input type="text" v-model="searchData.group_number" clearable></Input>
                </FormItem>
                <FormItem label="类型" prop="type">
                    <Select v-model="searchData.type" clearable>
                        <Option :value="1">有效新增</Option>
                        <Option :value="2">自拓</Option>
                        <Option :value="3">维护</Option>
                    </Select>
                </FormItem>
                <FormItem label="开拓人" prop="sale_name">
                    <Input type="text" v-model="searchData.sale_name" clearable placeholder="开拓业务员姓名"></Input>
                </FormItem>
                <FormItem label="维护人" prop="maintenance_name">
                    <Input type="text" v-model="searchData.maintenance_name" clearable placeholder="维护业务员姓名"></Input>
                </FormItem>
                <FormItem label="所属月份" prop="month" :label-width="80">
                    <DatePicker v-model="searchData.month" format="yyyy-MM" type="month" :clearable="false" @on-change="getData()"> </DatePicker>
                </FormItem>
                <FormItem label="合作时长" prop="cooperation_month" :label-width="80">
                    <Select v-model="searchData.cooperation_month" clearable>
                        <Option :value="1">1年内（含第1年）</Option>
                        <Option :value="2">1年到2年（含第2年）</Option>
                        <Option :value="3">2年到3年（含第3年）</Option>
                        <Option :value="4">3年以上</Option>
                    </Select>
                </FormItem>
                <FormItem :label-width="20">
                    <Button type="default" @click="toReset()">重置</Button>
                    <Button type="primary" @click="getData()">搜索</Button>
                    <Button type="success" @click="toExport()">导出</Button>
                </FormItem>
            </Form>
        </div>
        <div class="table-box">
            <vxe-table ref="table" :data="tableData" align="center" border :loading="loading" :sort-config="{ remote: true }" @sort-change="sortChangeEvent">
                <vxe-column field="maintenance_name" title="维护人" minWidth="120" fixed="left"></vxe-column>
                <vxe-column field="member_name" title="客户姓名" minWidth="200"></vxe-column>
                <vxe-column field="group_number" title="群号" minWidth="120"></vxe-column>
                <vxe-column field="type" title="类型" minWidth="120"></vxe-column>
                <vxe-column field="is_new" title="是否有效新增" minWidth="120">
                    <template #default="{ row }">
                        <Tag :color="row.is_new ? 'success' : 'default'">{{ row.is_new ? "是" : "否" }}</Tag>
                    </template>
                </vxe-column>

                <vxe-column field="total_rb_car" title="人保轿运险" minWidth="120" sortable></vxe-column>
                <vxe-column field="total_tb_car" title="太保轿运险" minWidth="120" sortable></vxe-column>
                <vxe-column field="total_car" title="轿运险保费" minWidth="120" sortable></vxe-column>
                <vxe-column field="total_ordinary" title="普货保费" minWidth="120" sortable></vxe-column>
                <vxe-column field="total" title="总保费" minWidth="120" sortable></vxe-column>
                <vxe-column field="sales_name" title="开拓人" minWidth="120"></vxe-column>
                <!-- <vxe-column field="maintenance_name" title="维护人" minWidth="120"></vxe-column> -->
                <vxe-column field="maintenance_leader_name" title="维护组长" minWidth="120"></vxe-column>
                <vxe-column field="register_time" title="注册时间" minWidth="120"></vxe-column>
                <vxe-column field="cooperation_date" title="合作时间" minWidth="120"></vxe-column>
            </vxe-table>
            <div class="page-box">
                <Page :total="page.total" :current="page.currentPage" :page-size="page.pageSize" show-sizer show-total show-elevator :page-size-opts="[10, 15, 50, 100, 500]" @on-change="onChangPage" @on-page-size-change="onPageSizeChange"> </Page>
            </div>
        </div>
    </div>
</template>
<script>
import api from "@/api";
export default {
    name: "premium_customer",
    data() {
        return {
            searchData: {
                sale_name: "",
                maintenance_name: "",
                member_name: "",
                type: "",
                month: this.$moment().subtract(1, "months").format("YYYY-MM"),
                order: "",
                sort: "",
                cooperation_month: "",
            },
            tableData: [],
            loading: false,
            page: {
                total: 0,
                currentPage: 1,
                pageSize: 15,
            },
        };
    },
    created() {
        this.init();
    },
    methods: {
        init() {
            this.getData();
        },
        search() {
            this.page.currentPage = 1;
            this.getData();
        },
        onChangPage(page) {
            this.page.currentPage = page;
            this.getData();
        },
        onPageSizeChange(pageSize) {
            this.page.pageSize = pageSize;
            this.getData();
        },
        getData() {
            this.loading = true;
            api.getCustomerPremiumList({
                ...this.searchData,
                month: this.$moment(this.searchData.month).format("YYYY-MM"),
                page: this.page.currentPage,
                pageSize: this.page.pageSize,
            })
                .then((res) => {
                    this.page.total = res.total;
                    this.tableData = res.data;
                })
                .finally((res) => {
                    this.loading = false;
                });
        },
        sortChangeEvent({ field, order }) {
            this.searchData.sort = field;
            this.searchData.order = order;
            this.search();
        },
        toReset() {
            this.$refs.search.resetFields();
            this.search();
        },
        toExport() {
            let close_msg = this.$Message.loading({
                content: "正在导出...",
                duration: 0,
            });
            api.getCustomerPremiumList({
                ...this.searchData,
                month: this.$moment(this.searchData.month).format("YYYY-MM"),
                export: 1,
            }).then((res) => {
                const link = document.createElement("a");
                link.href = res.download_url;
                link.setAttribute("download", res.download_name);
                document.body.appendChild(link);
                link.click();
                close_msg();
            });
        },
    },
};
</script>
<style scoped lang="less"></style>
